<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器2</title>
</head>
<body>
<div id="wrap">
    <!--和数据配合使用-->
    <!--debounce 延时过滤器,添加后show函数将延迟2秒执行-->
    <!--<input type="text" @keydown="show()|debounce 2000">-->
    <!--过滤器使用前要用|隔开,filterBy msg :将含有msg的元素筛选出来-->
    <!--<input type="text" v-model="msg" >-->
    <!--<ul>-->
    <!--<li v-for="item in arr | filterBy msg">-->
    <!--{{item}}-->
    <!--</li>-->
    <!--</ul>-->
    <!--limitBy 参数1:n选择前n个 -->
    <!--limitBy 参数1:n选择前n个  参数2:m从下标m开始-->
    <!--选择后两个 limitBy 2  arr.length-2 -->
    <!--<ul>-->
    <!--<li v-for="item in arr | limitBy 2 2">-->
    <!--{{item}}-->
    <!--</li>-->
    <!--</ul>-->
    <!--orderBy 排序, 参数n 按照参数n排序 参数n为1正序 为-1倒叙-->
    <!--<ul>-->
    <!--<input type="text" v-model="msg">-->
    <!--<li v-for="item in arr |orderBy 1"> {{item}}</li>-->
    <!--</ul>-->
</div>

</body>
</html>
<script src="vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#wrap',
        data: {
            msg: '',
            arr: ['blue', 'green', 'orange', 'gray', 'banana']
        },
        methods: {
            show: function () {
                alert(1);
            }
        }
    })
</script>